<template>
   <div class="app-container">
      <el-row :gutter="20">
         <el-col :span="18" :xs="24">
            <el-card>
               <template v-slot:header>
                 <div class="clearfix">
                   <span>基本资料</span>
                 </div>
               </template>
               <el-form ref="deptRef" :model="state.dept" label-width="200px">
                 <el-form-item label="店铺名称">
                   <el-input v-model="state.dept.deptName" />
                 </el-form-item>
                 <el-form-item label="邮箱">
                   <el-input v-model="state.dept.email" />
                 </el-form-item>
                 <el-form-item label="负责人">
                   <el-input v-model="state.dept.leader" />
                 </el-form-item>
                 <el-form-item label="联系电话">
                   <el-input v-model="state.dept.phone" />
                 </el-form-item>
                 <el-form-item label="最小计时单位（分钟）">
                   <el-input-number v-model="state.dept.minDuration" controls-position="right" :min="0" />
                 </el-form-item>
                 <el-form-item label="计费类型">
                   <el-radio-group v-model="state.dept.chargeType">
                     <el-radio
                         v-for="dict in sys_charge_type"
                         :key="dict.value"
                         :value="dict.value"
                     >{{ dict.label }}</el-radio>
                   </el-radio-group>
                 </el-form-item>
                 <el-form-item label="优惠类型">
                   <el-radio-group v-model="state.dept.offerType">
                     <el-radio
                         v-for="dict in sys_offer_type"
                         :key="dict.value"
                         :value="dict.value"
                     >{{ dict.label }}</el-radio>
                   </el-radio-group>
                 </el-form-item>
                 <el-form-item label="桌游价格（小时）">
                   <el-input-number v-model="state.dept.board" controls-position="right" :min="0" />
                 </el-form-item>
                 <el-form-item label="switch价格（小时）">
                   <el-input-number v-model="state.dept.switchs" controls-position="right" :min="0" />
                 </el-form-item>
                 <el-form-item label="ps价格（小时）">
                   <el-input-number v-model="state.dept.ps" controls-position="right" :min="0" />
                 </el-form-item>
               </el-form>
              <template #footer>
                <div class="dialog-footer">
                  <el-button type="primary" @click="submitForm">确 定</el-button>
                  <el-button @click="cancel">取 消</el-button>
                </div>
              </template>
            </el-card>
         </el-col>
      </el-row>
   </div>
</template>

<script setup name="info">

import { getShopInfo } from "@/api/shop/info"
import { updateDept } from "@/api/system/dept"
import { useDict } from '@/utils/dict' // 按实际路径导入
const { sys_charge_type } = useDict("sys_charge_type")
const { sys_offer_type } = useDict("sys_offer_type")
const { proxy } = getCurrentInstance()
const route = useRoute()
const state = reactive({
  dept: {},
  rules: {
    deptName: [{ required: true, message: "商家名称不能为空", trigger: "blur" }],
    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
    phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
  },
})

function getInfo() {
  getShopInfo().then(response => {
    console.log(response.data)
    state.dept = response.data

  })
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["deptRef"].validate(valid => {
    if (valid) {
      updateDept(state.dept).then(response => {
        proxy.$modal.msgSuccess("修改成功")
      })
    }
  })
}

onMounted(() => {
  getInfo()
})
</script>
